import React, { Component } from 'react'
import './App.css'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'

/**
 * todoList案例的相关知识点
 * 1、拆分组件、实现静态组件，注意：className、style的写法
 * 2、动态初始化列表，如何确定将数据放在哪个组件的state中？
 *    ——某个组件使用：放在其自身的state中
 *    ——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）
 * 3、关于父子之间通信：
 *    1、父组件给子组件传递数据：通过props传递
 *    2、子组件给父组件传递数据：通过props传递，要求父组件提前给子组件传递一个回调函数
 * 4、注意defaultChecked和checked的区别，类似的还有：defaultValue和value
 * 5、状态在哪里，操作状态的方法就在哪里
 */

export default class App extends Component {
  state = {
    todos: [
      {id: '001', name: '吃饭', done: true},
      {id: '002', name: '睡觉', done: true},
      {id: '003', name: '打代码', done: false},
      {id: '004', name: '逛街', done: false},
    ]
  }

  // 为什么方法都写在这，然后传给子，通过子回调这些方法？
  // 因为状态写在哪儿，方法就写在哪儿
  // addTodo用于添加一个todo，接受的参数是todo对象
  addTodo = (todoObj) => {
    console.log(todoObj, 'app')
    // 获取原todos
    const {todos} = this.state
    // 在todos的前面追加一个todo
    const newTodos = [todoObj, ...todos]
    // 更新状态，页面才会更新
    this.setState({todos: newTodos})
  }

  // updateTodo用于更新一个todo对象
  updateTodo = (id, done) => {
    // 获取状态中的todos
    const {todos} = this.state
    const newTodos = todos.map(todoObj => {
      // 函数体
      if(todoObj.id === id) {
        return {...todoObj, done}
      }else {
        return todoObj
      }
    })
    this.setState({todos: newTodos})
    console.log(newTodos, todos, '===')

  }

  // deleteTodo用于删除一个todo对象
  deleteTodo = (id) => {
    const {todos} = this.state
    const newTodos = todos.filter(todoObj => todoObj.id !== id)
    this.setState({todos: newTodos})
  }

  // checkAllTodo用于全选/全不选
  checkAllTodo = (done) => {
    // 获取原来的todos
    const {todos} = this.state
    // 加工数据
    const newTodos = todos.map(todoObj => {
      return {...todoObj, done}
    })
    // 更新状态
    this.setState({todos: newTodos})
  }

  render() {
    const {todos} = this.state

    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}/>
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
          <Footer todos={todos} checkAllTodo={this.checkAllTodo}/>
        </div>
      </div>
    )
  }
}